<!--
- Author:  LiShibin.
- Date:    2017/10/19 0019.
- File:    共享成员列表(分配权限).
-->
<template>
  <div class="Web_Box">
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="false"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false">
      <div class="bg_fff mb10" v-for="member in gardenMemberList.data">
        <div class="diary">
          <ul class=" f-cb">
            <li class="imgs" @click="gotoBlog(member.member_id)">
              <a><img :src="member.member_avatar ? $config.imgsite + $config.avatarSrc + member.member_avatar + '_w150': defaultAvatar"></a>
            </li>
            <li class="pl20 w400"><a>
              <h3 class="d_tit">{{member.member_name}}</h3>
              <p class="slh" @click="gotoDistributedPlantList(member.gm_id)">养护植物数量 {{member.curing_flower_num}}</p>
            </a></li>
            <li>
              <i class="iconfont icon-select" @click="switchSelected(member, false)" v-show="member.selected"></i>
              <i class="iconfont icon-pitch2" @click="switchSelected(member, true)" v-show="!member.selected"></i>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <empty-data :show="gardenMemberList.allLoaded && gardenMemberList.data.length <= 0"></empty-data>
    <div class="artic_btn f-cb">
      <a class=" bg_a8a8a8" @click="back">取消</a><a class="bg_3dbb6e" @click="modifyDistribute">确定</a>
    </div>
  </div>
</template>

<script>

  export default{
    data() {
      return {
        gardenId: this.$route.query.garden,
        memberId: this.$route.query.member,
        plantId: this.$route.query.plant,
        defaultAvatar: require('../../../assets/images/avatar.png'),
        gardenMemberList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    components: {},
    created() {
      this.getGardenMemberList(this.gardenMemberList.page, this.gardenMemberList.pageSize)
    },
    methods: {
      back() {
        this.$router.go(-1)
      },
      gotoBlog(memberId) {
        this.$router.push({name: 'blog-index', query: {member: memberId}})
      },
      gotoGoodsDetail(storeId, id) {
        this.$router.push({name: 'goods-detail', params: {id: id}, query: {storeId: storeId}})
      },
      gotoUnDistributePlantList(gardenMemberId) {
        this.$router.push({name: 'distribute-plant', query: {garden: this.gardenId, gardenMember: gardenMemberId}})
      },
      gotoDistributedPlantList(gardenMemberId) {
        this.$router.push({name: 'distribute-member-plant', query: {gardenMember: gardenMemberId}})
      },
      switchSelected(member, boolValue) {
        for (let i = 0; i < this.gardenMemberList.data.length; i++) { // 取消其他的勾选，只能选一个养护员
          if (this.gardenMemberList.data[i].member_id != member.member_id && this.gardenMemberList.data[i].selected) {
            this.gardenMemberList.data[i].selected = false
          }
        }
        if (member.selected) {
          member.selected = boolValue
        } else {
          this.$set(member, 'selected', boolValue)
        }
      },
      modifyDistribute() {
        let selectedGardenMemberId = ''
        for (let i = 0; i < this.gardenMemberList.data.length; i++) { // 取消其他的勾选，只能选一个养护员
          if (this.gardenMemberList.data[i].selected) {
            selectedGardenMemberId = this.gardenMemberList.data[i].gm_id
            break
          }
        }
        this.$request.memberAddDistributePlant(selectedGardenMemberId, [this.plantId]).then(data => {
          this.$toast('分配成功')
          this.$router.go(-1)
        }).catch(e => {
          this.$toast('分配失败:' + e.msg)
        })
      },
      getGardenMemberList(page, pageSize) {
        this.gardenMemberList.loading = true
        this.$request.getGardenMemberList(this.gardenId, page, pageSize).then(data => {
          if (data.length < this.gardenMemberList.pageSize) {
            this.gardenMemberList.allLoaded = true
          }
          for (let i = 0; i < data.length; i++) {
            if (data[i].member_id == this.memberId) {
              this.$set(data[i], 'selected', true)
            }
          }
          this.gardenMemberList.data = [...this.gardenMemberList.data, ...data]
        }).finally(() => {
          this.gardenMemberList.requested = true
          this.gardenMemberList.loading = false
        })
      },
      loadMore() {
        if (this.gardenMemberList.loading || this.gardenMemberList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getGardenMemberList(++this.gardenMemberList.page, this.gardenMemberList.pageSize)
        }, 500)
      },
      delFans(id) {
        this.$messageBox.confirm(`你确定要删除吗?`).then(action => {
          this.$request.delFans(id).then(data => {
            this.$toast('删除收藏成功')
            for (let i = 0; i < this.gardenMemberList.data.length; i++) {
              if (this.gardenMemberList.data[i].goods_commonid == id) {
                this.gardenMemberList.data.splice(i, 1)
              }
            }
          }).catch(e => {
            this.$toast('删除收藏失败：' + e.msg)
          })
        }).catch(() => {
        })
      }
    }
  }
</script>

<style>

</style>